<template>
  <div>
    <div style="position: absolute; left: 20px; top: 150px;" v-if="choice">
      <Button type="primary" @click="choice = true">国内疫情情况</Button>
      <br>
      <Button style="margin-top: 10px;" @click="choice = false">海外确诊情况</Button>
    </div>

    <div style="position: absolute; left: 20px; top: 150px;" v-else>
      <Button @click="choice = true">国内疫情情况</Button>
      <br>
      <Button style="margin-top: 10px;" type="primary" @click="choice = false">海外确诊情况</Button>
    </div>

    <div v-if="choice">
      <iframe
        src="/visualize2/中国累计确诊.html"
        frameborder="0"
        width="100%"
        height="600px"
      ></iframe>

      <div style="width: 910px; margin: auto">
        <iframe
          src="/visualize2/广东疫情地图.html"
          frameborder="0"
          width="100%"
          height="520px"
        ></iframe>
      </div>
    </div>

    <div style="width: 910px; margin: auto" v-else>
      <iframe
        src="/visualize2/海外确诊地图.html"
        frameborder="0"
        width="100%"
        height="1600px"
      ></iframe>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Visualize2",
    data() {
      return {
        choice: true  // default true to display domestic data
      }
    }
  }
</script>

<style scoped>

</style>
